<template>
    <div class="dtItemListBox">
        <item-title :title="title" @change="getOpenStatus" :open="openStatus"/>
        <List v-show="openStatus" :lists="lists"/>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import List from '@/components/list.vue'
import itemTitle from './itemTitle.vue'

export default {
    props:{
        title:String,
        open:{
            type:Boolean,
            default:false
        },
        lists:{
            type:Array,
            default:[
                
            ]
        }
    },
    components:{
        itemTitle,
        List
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            openStatus:props.open
        })
        
        const getOpenStatus = (status)=>{
            state.openStatus = status
            const btLdEle = document.querySelector('.landmarmbox .btmsg .van-loading')
            if(status){
                btLdEle && (btLdEle.style.display = 'inline-block')
            }else{
                btLdEle && (btLdEle.style.display = 'none')
            }
        }

        return{
            ...toRefs(state),
            getOpenStatus
        }
    }
}
</script>

<style lang="scss" scoped>
    .dtItemListBox{
        padding: 0 0 30px 0;
    }
</style>